<template>
  <div id="app">
    <!-- <el-table :data="tableData2" style="width: 100%">
      <el-table-column prop="id" label="idd" width="180" />
      <el-table-column prop="productName" label="productName" width="180" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="Add">
            添加
          </el-button>
          <el-button link type="primary" size="small"
            @click="Update(scope.row.productName, scope.row.id)">修改</el-button>
          <el-button link type="primary" size="small" @click="Delect(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[2, 4, 6, 10]"
      :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="rows" @size-change="handleSizeChange" @current-change="handleCurrentChange" />


    <el-dialog v-model="dialogVisible" title="添加" width="500" :before-close="handleClose">
      <el-form :model="addUser" :rules="addUserRules" ref="addUserRef" label-width="100px">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="addUser.username" style="width: 240px" />
        </el-form-item>
      </el-form>
      <br />
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button @click="Add2">添加</el-button>
    </el-dialog>

    <el-dialog v-model="dialogVisible2" title="修改" width="500" :before-close="handleClose">
      <el-form :model="addUser2" :rules="addUserRules2" ref="addUserRef2" label-width="100px">
        <el-form-item label="用户名称" prop="username2">
          <el-input v-model="addUser2.username2" style="width: 240px" />
        </el-form-item>
      </el-form>
      <br />
      <el-button @click="dialogVisible2 = false">关闭</el-button>
      <el-button @click="Update2">修改</el-button>
    </el-dialog> -->


    <router-view></router-view>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'
// import { ref, reactive, onMounted } from "vue";
// import axios from "axios";

export default {
  name: 'App',
  // setup() {
  //   let tableData = ref([]);
  //   let tableData2 = ref([]);
  //   let dialogVisible = ref(false);
  //   let dialogVisible2 = ref(false);
  //   let name = ref("");
  //   let name2 = ref("");
  //   let id3 = ref();
  //   let currentPage = ref(1);
  //   let pageSize = ref(2);
  //   let rows = ref(0);

  //   let addUser = reactive({
  //     username: ''
  //   });

  //   let addUser2 = reactive({
  //     username2: ''
  //   });
  //   let addUserRules = reactive({
  //     username: [
  //       { required: true, message: '请输入用户名称', trigger: 'blur' }
  //     ]
  //   });

  //   let addUserRules2 = reactive({
  //     username2: [
  //       { required: true, message: '请输入用户名称', trigger: 'blur' }
  //     ]
  //   })
  //   const addUserRef = ref(null);
  //   const addUserRef2 = ref(null);
  //   function show() {
  //     axios.get("http://localhost:5294/api/ProductController/Select").then(resp => {
  //       //console.log(resp.data)
  //       tableData.value = resp.data;
  //       console.log(tableData.value)
  //     }).catch(err => {
  //       console.log(err);
  //     })
  //   };

  //   function Add() {
  //     dialogVisible.value = true;
  //   };


  //   function Add2() {

  //     addUserRef.value.validate((valid) => {
  //       if (valid) {
  //         axios.post("http://localhost:5294/api/ProductController/Add", {
  //           productName: addUser.username
  //         }).then(resp => {
  //           if (resp.data == true) {
  //             alert("添加成功!");
  //             show2();
  //             dialogVisible.value = false;
  //             name.value = "";
  //           } else {
  //             alert("添加失败!")
  //           }
  //         }).catch(err => {
  //           console.log(err)
  //         })
  //       }
  //     })
  //   };

  //   function Update(productName, id2) {
  //     dialogVisible2.value = true;
  //     name2.value = productName;
  //     id3.value = id2;
  //   };

  //   function Update2() {
  //     addUserRef2.value.validate((valid) => {
  //       axios.put("http://localhost:5294/api/ProductController/Update", {
  //         id: id3.value,
  //         productName: addUser2.username2
  //       }).then(resp => {
  //         if (resp.data == true) {
  //           alert("修改成功!");
  //           show2();
  //           dialogVisible2.value = false;
  //           name2.value = "";
  //         } else {
  //           alert("修改失败!");
  //         }
  //       }).catch(err => {
  //         console.log(err)
  //       })
  //     })
  //   };

  //   function Delect(row) {
  //     axios.delete("http://localhost:5294/api/ProductController/Remove", {
  //       data: { id: row, productName: "" }
  //     }).then(resp => {
  //       if (resp.data == true) {
  //         alert("删除成功!");
  //         show2();
  //       } else {
  //         alert("删除失败!");
  //       }
  //     }).catch(err => {
  //       console.log(err);
  //     })
  //   };

  //   function show2() {
  //     axios.get("http://localhost:5294/api/ProductController/GetFenYe", {
  //       params: {
  //         currentPage: currentPage.value,
  //         pageSize: pageSize.value
  //       }
  //     }).then(resp => {
  //       tableData2.value = resp.data.list;
  //       rows.value = resp.data.rows;
  //     }).catch(err => {
  //       console.log(err);
  //     })
  //   };

  //   function handleSizeChange(size) {
  //     pageSize.value = size;
  //     show2();
  //   }

  //   function handleCurrentChange(cpage) {
  //     currentPage.value = cpage;
  //     show2();
  //   }

  //   onMounted(() => {
  //     show2();
  //   })

  //   return {
  //     tableData,
  //     dialogVisible,
  //     dialogVisible2,
  //     Add,
  //     name,
  //     Add2,
  //     Update,
  //     name2,
  //     Update2,
  //     id3,
  //     Delect,
  //     currentPage,
  //     pageSize,
  //     rows,
  //     tableData2,
  //     handleCurrentChange,
  //     handleSizeChange,
  //     addUser,
  //     addUserRules,
  //     addUserRef,
  //     addUser2,
  //     addUserRules2,
  //     addUserRef2
  //   }
  // }
  // components: {
  //   HelloWorld
  // }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
